<template lang="pug">
  el-drawer.commonDrawer(
    :title="categoryName"
    :visible.sync="visibleDialog"
    v-loading="loading"
    custom-class="commonDrawer"
    direction="rtl"
    size="960px"
    append-to-body
    destroy-on-close
    modal-append-to-body
  )
    .drawer-content
      template(v-for="(item, index) in courseContent")
        el-card.commonCard(shadow="never")
          h2(slot="header") {{item.title}}
          course-content(:item="item" :key="index")

</template>

<script>
import AImage from '@/components/Basic/Image'
import { getCategoryTypeByGuide } from '../api'
import MarkdownEditor from '@/components/Basic/MarkdownEditor'
import CourseContent from './courseContent'
export default {
  components: {
    MarkdownEditor,
    AImage,
    CourseContent
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    courseId: {
      type: [String, Number],
      default: ''
    },
    categoryName: {
      type: String,
      default: ''
    },
    categoryType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      name: '',

      courseContent: [],
      step: {},
      stepVisible: false
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.getData()
      }
    }
  },
  created () {
  },
  methods: {
    getData () {
      this.courseContent = []
      const { courseId, categoryType } = this
      getCategoryTypeByGuide({ courseId, categoryType }).then(res => {
        this.courseContent = res.map(x => {
          x.curTabKey = 0
          return x
        })
      })
    },

    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
